import { Component } from "react";
import { Card, Row, Button, Form, Select } from 'antd';
import { Uploader } from 'antd-pro-toolkit'
import Link from "umi/link";
import { connect } from 'dva';
import router from 'umi/router';
import classNames from 'classnames';
import ScrollSelect from '@/components/ScrollSelect';
import PageHeaderWrapper from '@/components/PageHeaderWrapper';
import { ImportTips } from "./ImportTips";
import api from '@/api';

import styles from './Import.less';
const { Option } = Select
const FormItem = Form.Item
@connect(({ loading, product }) => ({
  nextLoading: loading.effects['productService/queryImportResult'],
  product: product.products,
}))
@Form.create()
class Import extends Component {
  state = {
    file: {},
    filePath: ''
  }
  componentDidMount() {
    this.queryProducts()
  }
  handleChange = (file) => {
    this.setState({
      file: file[0],
      filePath: file[0].path
    });
  }
  queryProducts = () => {
    const { dispatch } = this.props;
    dispatch({
      type: 'product/fetch'
    })
  };
  checkNumbers = () => {
    const { dispatch, form: { validateFields } } = this.props;
    const { filePath } = this.state;
    validateFields((err, value) => {
      if (err) return
      dispatch({
        type: 'productService/queryImportResult',
        payload: {
          queryParams: {
            filePath: value.file[0].path
          }
        }
      }).then(({ errorCode }) => {
        if (0 === errorCode) {
          router.push(`/product/bind/result?filePath=${filePath}&product=${value.product}`)
        }
      })
    })
  }
  querySuppliers = params => {
    return api.supplier.shortQuery({
      queryParams: params,
    });
  };

  render() {
    const { file: { name = '请选择文件' }, filePath } = this.state;
    const { nextLoading, form: { getFieldDecorator }, product } = this.props;

    return (
      <PageHeaderWrapper title="导入" backRoute='/product/bind'>
        <Card bordered={false}>
          <ul className={styles.tips}>
            {
              ImportTips.map((item, index) => (
                <li key={index}>{item}</li>
              ))
            }
          </ul>
          <p><a href="/api/v1/biz/productService/downloadTemplate">下载《导入模板》</a></p>
          <Row type='flex' style={{ marginBottom: 24 }}>
            <div className={
              classNames(styles.fileName, {
                [styles.resultColor]: filePath
              })
            }>{name}</div>
            {getFieldDecorator('file')(<Uploader
              uploadInfo={{ action: "/api/v1/sys/files/upload", accept: '.xls,.xlsx' }}
              placeholder='浏览'
              type="list"
              maxFileSize={8}
              showResult={false}
              alwaysShowUploadButton={true}
              style={{ display: 'inline-block' }}
              onChange={this.handleChange}
              max={1}
            />)}
          </Row>
          <Row type='flex'>
            <FormItem label='产品'>
              {getFieldDecorator('product', {
                rules: [
                  { required: true, message: '请选择产品' }
                ]
              })(
                <Select
                  mode='multiple'
                  allowClear
                  style={{ width: 300 }}
                >
                  {
                    product.list.filter(item => item.id === '10000' || item.id === '10001').map(item => (
                      <Option key={item.id}>{item.name}</Option>
                    ))
                  }
                </Select>
              )}
            </FormItem>
          </Row>
          <Row>
            <Button style={{ margin: '0 20px 0 0' }}>
              <Link to={`/product/bind`}>取消</Link>
            </Button>
            <Button type='primary' loading={nextLoading} onClick={this.checkNumbers}>
              下一步
            </Button>
          </Row>
        </Card>
      </PageHeaderWrapper>
    );
  }
}

export default Import
